import React from 'react';
import styles from './style';
import { TouchableOpacity, Text, Image, View, DeviceEventEmitter } from 'react-native';
import * as Animatable from 'react-native-animatable';
import ListImg from '../../../../common/component/listImg';
import { getUserInfo } from '../../../../common/api/user';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { getPhotosList } from '../../../../common/api/photos';
import { defalutAvatar } from '../../../../util/constants';
import { getMyFocusPhotosList } from '../../../../common/api/userFocusPhotos';

const edit = require('../../img/edit.png');
const midButton = [
    { img: require('../../img/down.png'), tag: '历史下载', url: 'DownLoad' },
    { img: require('../../img/rew.png'), tag: '审核进度', url: 'Review' },
    { img: require('../../img/service.png'), tag: '帮助反馈', url: 'Help' },
    { img: require('../../img/set.png'), tag: '设置中心', url: 'Setting' },
];
const ca = require('../../img/ca.png');
const he = require('../../img/he.png');
const add = require('../../img/add.png');

export default class Mine extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tagList: [
                { id: '1', num: 97, tag: '人气' },
                { id: '2', num: 635, tag: '粉丝' },
                { id: '3', num: 58, tag: '关注' },
            ],
            typeTitle: '我的作品',
            typeIcon: he,
            userInfo: {
                avatar: '',
                nickname: '',
                desc: '',
            },
            list: [],
        };
    }
    async componentDidMount() {
        // this.getUserInfoData();
        // 这里的`param`可以为空，接受你B页面传过来的数据
        // this.subscription = DeviceEventEmitter.addListener('RefreshMineData', param => {
        //     // 刷新界面等
        //     this.getUserInfoData();
        // });
        // let userInfo = await AsyncStorage.getItem('userInfo');
        // userInfo = '';
        // if (userInfo) {
        //     const parseUserInfo = JSON.parse(userInfo);
        //     if (parseUserInfo) {
        //         userInfo = parseUserInfo;
        //     }
        // }
        const userInfo = await getUserInfo();
        await this.getMyPhotosData(userInfo);
        this.setUserInfo(userInfo);
    }
    // componentWillUnmount() {
    //     this.subscription.remove();
    // }
    getMyPhotosData = async userInfo => {
        const res = await getPhotosList({ user: userInfo._id, auditStatus: 1 });
        this.setState({
            list: res,
        });
    };
    getMyFocusPhotosData = async () => {
        const res = await getMyFocusPhotosList();
        this.setState({
            list: res,
        });
    };
    getUserInfoData = async () => {
        const res = await getUserInfo();
        if (!res) {
            return;
        }
        this.setUserInfo(res);
        return res;
    };
    setUserInfo = userInfo => {
        const tagList = [
            { id: '1', num: userInfo.popularCount, tag: '人气' },
            { id: '2', num: userInfo.fansCount, tag: '粉丝' },
            { id: '3', num: userInfo.foucsCount, tag: '关注' },
        ];
        this.setState({ tagList, userInfo });
        return userInfo;
    };

    item(val) {
        const userInfo = this.state.userInfo;
        return (
            <View key={val.id}>
                {/* 判断是人气还是粉丝 */}
                {val.id !== '1' ? (
                    <TouchableOpacity
                        style={styles.tag}
                        activeOpacity={0.6}
                        key={val.tag}
                        onPress={() =>
                            this.props.navigation.navigate('Fans', {
                                title: val.id === '2' ? '我的粉丝' : '我关注的',
                                listWhere:
                                    val.id === '2' ? { beFocusUser: userInfo._id } : { user: userInfo._id },
                            })
                        }
                    >
                        <Text style={styles.num}>{val.num}</Text>
                        <Text style={styles.tagName}>{val.tag}</Text>
                    </TouchableOpacity>
                ) : (
                    <View style={styles.tag}>
                        <Text style={styles.num}>{val.num}</Text>
                        <Text style={styles.tagName}>{val.tag}</Text>
                    </View>
                )}
            </View>
        );
    }
    button(val) {
        return (
            <TouchableOpacity
                style={styles.midButton}
                activeOpacity={0.6}
                key={val.tag}
                onPress={() => this.props.navigation.navigate(val.url)}
            >
                <Image source={val.img} style={styles.midButtonImg} />
                <Text style={styles.midButtonTag}>{val.tag}</Text>
            </TouchableOpacity>
        );
    }
    handleViewRef(ref) {
        this.view = ref;
    }
    changeType() {
        let { typeTitle, userInfo } = this.state;
        this.view.rubberBand();
        typeTitle = typeTitle === '我的作品' ? '我喜欢的' : '我的作品';

        if (typeTitle === '我的作品') {
            this.getMyPhotosData(userInfo);
        } else if (typeTitle === '我喜欢的') {
            this.getMyFocusPhotosData();
        }

        let typeIcon = this.state.typeIcon === he ? ca : he;
        this.setState({
            typeTitle,
            typeIcon,
        });
    }
    render() {
        let { navigation } = this.props;
        let { tagList, typeIcon, typeTitle, userInfo, list } = this.state;
        const uri = { uri: userInfo.avatar || defalutAvatar };
        return (
            <>
                <View style={styles.container}>
                    <Animatable.View style={styles.topContainer} animation="slideInDown">
                        <View style={styles.topLeft}>
                            <Text style={styles.name}>{userInfo.nickname}</Text>
                            <Text style={styles.sing}>{userInfo.desc}</Text>
                            <View style={styles.tagList}>{tagList.map(val => this.item(val))}</View>
                        </View>
                        <TouchableOpacity
                            onPress={() => {
                                console.log('跳转到编辑个人资料');
                                navigation.navigate('MineInfo');
                            }}
                            style={styles.avatarContainer}
                            activeOpacity={0.6}
                        >
                            <Image source={uri} style={styles.avatar} />
                            <Image source={edit} style={styles.edit} />
                        </TouchableOpacity>
                    </Animatable.View>
                    <View style={styles.midContainer}>{midButton.map(val => this.button(val))}</View>

                    <View style={styles.bottomBtnContainer}>
                        <View style={styles.typeContainer}>
                            <Animatable.View
                                style={styles.typeNameContainer}
                                ref={ref => this.handleViewRef(ref)}
                            >
                                <Text style={styles.typeName}>{typeTitle}</Text>
                            </Animatable.View>
                            <TouchableOpacity
                                style={styles.typeIconContainer}
                                onPress={() => this.changeType()}
                            >
                                <Image style={styles.typeIcon} source={typeIcon} />
                            </TouchableOpacity>
                        </View>
                        <TouchableOpacity
                            style={styles.addIconContainer}
                            onPress={() => navigation.navigate('AddImg')}
                        >
                            <Image style={styles.add} source={add} />
                        </TouchableOpacity>
                    </View>
                    <ListImg navigation={navigation} selfStatus list={list} />
                </View>
            </>
        );
    }
}
